<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - 灰鲸商城</title>
    <!-- 外部资源 -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css">
    <script src="https://unpkg.com/element-plus"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="icon" href="../static/img/huijing_mall1.ico" type="image/x-icon">

    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#409eff',
                        success: '#67c23a',
                        warning: '#e6a23c',
                        danger: '#f56c6c',
                        dark: '#1d2129',
                        light: '#f5f7fa'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>

    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .cart-item-hover {
                @apply hover:bg-gray-50 transition-colors duration-200;
            }
            .btn-primary {
                @apply bg-primary text-white hover:bg-primary/90 transition-colors;
            }
            .btn-secondary {
                @apply border border-gray-300 hover:bg-gray-50 transition-colors;
            }
        }
    </style>
</head>
<body class="font-inter bg-gray-50 text-dark min-h-screen">
<div id="app">
    <!-- 导航栏 -->
    <header class="sticky top-0 z-50 bg-white shadow-sm transition-all duration-300">
        <div class="container mx-auto px-4">
            <div class="flex items-center justify-between h-16 md:h-20">
                <!-- 品牌标志 -->
                <div class="flex items-center">
                    <a href="/" class="text-2xl font-bold text-primary flex items-center">
                        <i class="fas fa-whale mr-2"></i>
                        <span>灰鲸商城</span>
                    </a>
                </div>

                <!-- 搜索栏 - 仅在桌面显示 -->
                <div class="hidden md:flex items-center flex-1 max-w-xl mx-8">
                    <div class="relative w-full">
                        <input
                                type="text"
                                placeholder="搜索商品..."
                                class="w-full py-2 px-4 pr-10 rounded-full border focus:outline-none focus:ring-2 focus:ring-primary/50"
                        >
                        <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-primary">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>

                <!-- 用户操作区 -->
                <div class="flex items-center space-x-1 md:space-x-4">
                    <!-- 购物车按钮 -->
                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100 relative" title="购物车" @click="showCartPopup = true">
                        <i class="fas fa-shopping-cart text-lg"></i>
                        <span class="absolute -top-1 -right-1 bg-warning text-white text-xs rounded-full w-5 h-5 flex items-center justify-center">
                                {{ cartCount }}
                            </span>
                    </button>

                    <button class="p-2 md:p-3 rounded-full hover:bg-gray-100" title="消息">
                        <i class="fas fa-bell text-lg"></i>
                    </button>

                    <div class="relative group">
                        <button class="flex items-center space-x-1 p-1 rounded-full hover:bg-gray-100">
                            <img
                                    :src="user.avatar || defaultAvatar"
                                    alt="用户头像"
                                    class="w-8 h-8 rounded-full object-cover border border-gray-200"
                            >
                            <span class="hidden md:inline font-medium">{{ user.nickname || '登录/注册' }}</span>
                            <i class="fas fa-chevron-down text-xs opacity-70"></i>
                        </button>

                        <!-- 用户菜单 -->
                        <div class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-1 z-10 hidden group-hover:block transition-all">
                            <a href="/profile.html" class="block px-4 py-2 text-sm hover:bg-gray-100 bg-primary/5 text-primary">
                                <i class="fas fa-user mr-2"></i>个人中心
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-heart mr-2"></i>我的收藏
                            </a>
                            <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">
                                <i class="fas fa-box mr-2"></i>我的订单
                            </a>
                            <div class="border-t border-gray-100 my-1"></div>
                            <button @click="logout" class="w-full text-left px-4 py-2 text-sm text-danger hover:bg-gray-100">
                                <i class="fas fa-sign-out-alt mr-2"></i>退出登录
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-xl shadow-sm overflow-hidden">
            <div class="p-6 border-b">
                <h1 class="text-2xl font-bold">我的购物车</h1>
                <p class="text-gray-500 mt-1">共 {{ cartCount }} 件商品</p>
            </div>

            <!-- 购物车为空状态 -->
            <div v-if="cartItems.length === 0" class="text-center py-20">
                <div class="w-24 h-24 bg-gray-100 rounded-full flex items-center justify-center mx-auto">
                    <i class="fas fa-shopping-cart text-4xl text-gray-400"></i>
                </div>
                <p class="mt-4 text-gray-500">您的购物车还是空的</p>
                <a href="/" class="mt-6 inline-block px-6 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors">
                    去购物
                </a>
            </div>

            <!-- 购物车商品列表 -->
            <div v-else>
                <!-- 购物车表头 -->
                <div class="hidden md:grid md:grid-cols-12 gap-4 px-6 py-4 font-medium text-gray-600 border-b">
                    <div class="col-span-1">
                        <label class="inline-flex items-center cursor-pointer">
                            <input
                                    type="checkbox"
                                    v-model="selectAll"
                                    class="form-checkbox text-primary rounded"
                                    @change="handleSelectAll"
                            >
                            <span class="ml-2">全选</span>
                        </label>
                    </div>
                    <div class="col-span-5">商品信息</div>
                    <div class="col-span-2 text-center">单价</div>
                    <div class="col-span-2 text-center">数量</div>
                    <div class="col-span-1 text-center">小计</div>
                    <div class="col-span-1 text-center">操作</div>
                </div>

                <!-- 购物车商品 -->
                <div class="divide-y">
                    <div
                            class="grid grid-cols-12 gap-4 px-4 py-4 cart-item-hover"
                            v-for="(item, index) in cartItems"
                            :key="item.id"
                    >
                        <!-- 选择框 - 移动端 -->
                        <div class="col-span-1 md:hidden flex items-center justify-center">
                            <input
                                    type="checkbox"
                                    v-model="item.selected"
                                    class="form-checkbox text-primary rounded"
                                    @change="handleItemSelect"
                            >
                        </div>

                        <!-- 选择框和商品图片 - 桌面端 -->
                        <div class="col-span-1 hidden md:flex items-center">
                            <input
                                    type="checkbox"
                                    v-model="item.selected"
                                    class="form-checkbox text-primary rounded"
                                    @change="handleItemSelect"
                            >
                        </div>

                        <!-- 商品信息 -->
                        <div class="col-span-11 md:col-span-5 flex">
                            <img
                                    :src="item.image"
                                    alt="商品图片"
                                    class="w-20 h-20 object-cover rounded-md flex-shrink-0"
                            >
                            <div class="ml-3 flex-1 min-w-0">
                                <h3 class="font-medium line-clamp-2" @click="goToProductDetail(item.productId)">{{ item.name }}</h3>
                                <p class="text-gray-500 text-sm mt-1 line-clamp-1">{{ item.specs }}</p>
                                <p class="text-danger font-medium mt-1 md:hidden">¥{{ item.price.toFixed(2) }}</p>
                            </div>
                        </div>

                        <!-- 单价 - 仅桌面显示 -->
                        <div class="hidden md:flex md:col-span-2 items-center justify-center">
                            <div>
                                <p class="text-danger font-medium">¥{{ item.price.toFixed(2) }}</p>
                                <p class="text-gray-500 text-xs line-through mt-1" v-if="item.originalPrice > item.price">
                                    ¥{{ item.originalPrice.toFixed(2) }}
                                </p>
                            </div>
                        </div>

                        <!-- 数量 -->
                        <div class="col-span-4 md:col-span-2 flex items-center justify-center">
                            <div class="flex items-center border rounded-md">
                                <button
                                        class="w-8 h-8 flex items-center justify-center text-gray-600 hover:bg-gray-100"
                                        @click="decreaseQuantity(index)"
                                        :disabled="item.quantity <= 1"
                                >
                                    <i class="fas fa-minus text-xs"></i>
                                </button>
                                <input
                                        type="number"
                                        v-model="item.quantity"
                                        class="w-10 h-8 text-center border-x focus:outline-none"
                                        min="1"
                                        @change="handleQuantityChange(index)"
                                >
                                <button
                                        class="w-8 h-8 flex items-center justify-center text-gray-600 hover:bg-gray-100"
                                        @click="increaseQuantity(index)"
                                        :disabled="item.quantity >= item.stock"
                                >
                                    <i class="fas fa-plus text-xs"></i>
                                </button>
                            </div>
                            <p class="text-gray-500 text-xs ml-2 hidden md:inline">库存: {{ item.stock }}件</p>
                        </div>

                        <!-- 小计 -->
                        <div class="col-span-4 md:col-span-1 flex items-center justify-center md:justify-end font-medium">
                            <span class="text-danger">¥{{ (item.price * item.quantity).toFixed(2) }}</span>
                        </div>

                        <!-- 操作 -->
                        <div class="col-span-3 md:col-span-1 flex items-center justify-center md:justify-end">
                            <button
                                    class="text-gray-500 hover:text-primary mr-4"
                                    @click="moveToFavorites(index)"
                            >
                                <i class="fas fa-heart"></i>
                                <span class="ml-1 text-xs hidden md:inline">收藏</span>
                            </button>
                            <button
                                    class="text-gray-500 hover:text-danger"
                                    @click="removeItem(index)"
                            >
                                <i class="fas fa-trash"></i>
                                <span class="ml-1 text-xs hidden md:inline">删除</span>
                            </button>
                        </div>
                    </div>
                </div>

                <!-- 操作栏 -->
                <div class="flex flex-col md:flex-row justify-between items-center px-6 py-4 bg-gray-50">
                    <div class="flex items-center mb-4 md:mb-0">
                        <button class="text-gray-600 hover:text-primary mr-6">
                            <i class="fas fa-trash-alt mr-1"></i>
                            <span>清空购物车</span>
                        </button>
                        <button class="text-gray-600 hover:text-primary">
                            <i class="fas fa-exchange-alt mr-1"></i>
                            <span>移到收藏夹</span>
                        </button>
                    </div>

                    <div class="flex items-center">
                        <div class="mr-6 text-right">
                            <p class="text-gray-600">
                                已选 <span class="text-primary font-medium">{{ selectedCount }}</span> 件商品
                            </p>
                            <p class="mt-1">
                                合计: <span class="text-danger text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
                                <span class="text-gray-500 text-sm ml-2">(不含运费)</span>
                            </p>
                        </div>
                        <button
                                class="px-8 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors font-medium"
                                :disabled="selectedCount === 0"
                                @click="goToCheckout"
                        >
                            结算
                        </button>
                    </div>
                </div>
            </div>

            <!-- 推荐商品 -->
            <div v-if="cartItems.length > 0" class="p-6 border-t">
                <h2 class="text-lg font-bold mb-4">为您推荐</h2>
                <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
                    <div
                            class="border rounded-lg overflow-hidden hover:shadow-md transition-shadow cursor-pointer"
                            v-for="product in recommendedProducts"
                            :key="product.id"
                            @click="goToProductDetail(product.id)"
                    >
                        <img :src="product.image" :alt="product.name" class="w-full h-32 object-cover">
                        <div class="p-2">
                            <h3 class="text-sm font-medium line-clamp-2 h-12">{{ product.name }}</h3>
                            <div class="mt-1 flex items-center">
                                <span class="text-danger font-bold text-sm">¥{{ product.price.toFixed(2) }}</span>
                                <span class="ml-1 text-xs text-gray-500 line-through" v-if="product.originalPrice > product.price">
                                        ¥{{ product.originalPrice.toFixed(2) }}
                                    </span>
                            </div>
                            <button
                                    class="mt-2 w-full py-1.5 bg-primary/10 text-primary rounded-md text-xs hover:bg-primary/20 transition-colors"
                                    @click.stop="addQuickToCart(product)"
                            >
                                加入购物车
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 购物车弹窗 -->
    <div
            class="fixed right-0 top-0 bottom-0 w-full sm:w-96 bg-white shadow-xl z-50 transform transition-transform duration-300 ease-in-out"
            :class="showCartPopup ? 'translate-x-0' : 'translate-x-full'"
    >
        <div class="flex flex-col h-full">
            <!-- 弹窗头部 -->
            <div class="p-4 border-b flex justify-between items-center">
                <h3 class="font-bold text-lg">购物车</h3>
                <button class="p-2 hover:bg-gray-100 rounded-full" @click="showCartPopup = false">
                    <i class="fas fa-times"></i>
                </button>
            </div>

            <!-- 弹窗内容 -->
            <div class="flex-1 overflow-y-auto p-4">
                <div v-if="cartItems.length === 0" class="text-center py-12">
                    <i class="fas fa-shopping-cart text-4xl text-gray-300 mb-3"></i>
                    <p class="text-gray-500">购物车为空</p>
                    <button
                            class="mt-4 px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm"
                            @click="showCartPopup = false"
                    >
                        去购物
                    </button>
                </div>

                <div v-else class="space-y-4">
                    <div
                            class="flex p-3 border rounded-lg"
                            v-for="(item, index) in cartItems"
                            :key="item.id"
                    >
                        <img
                                :src="item.image"
                                alt="商品图片"
                                class="w-20 h-20 object-cover rounded-md flex-shrink-0"
                        >
                        <div class="ml-3 flex-1 min-w-0">
                            <h3 class="font-medium text-sm line-clamp-2">{{ item.name }}</h3>
                            <p class="text-gray-500 text-xs mt-1 line-clamp-1">{{ item.specs }}</p>
                            <div class="flex justify-between items-center mt-2">
                                <span class="text-danger font-medium">¥{{ item.price.toFixed(2) }}</span>
                                <div class="flex items-center border rounded-md">
                                    <button
                                            class="w-6 h-6 flex items-center justify-center text-gray-600 hover:bg-gray-100 text-xs"
                                            @click="decreaseQuantity(index)"
                                            :disabled="item.quantity <= 1"
                                    >
                                        <i class="fas fa-minus"></i>
                                    </button>
                                    <input
                                            type="number"
                                            v-model="item.quantity"
                                            class="w-8 h-6 text-center border-x focus:outline-none text-xs"
                                            min="1"
                                            @change="handleQuantityChange(index)"
                                    >
                                    <button
                                            class="w-6 h-6 flex items-center justify-center text-gray-600 hover:bg-gray-100 text-xs"
                                            @click="increaseQuantity(index)"
                                            :disabled="item.quantity >= item.stock"
                                    >
                                        <i class="fas fa-plus"></i>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <button
                                class="ml-2 text-gray-400 hover:text-danger self-start"
                                @click="removeItem(index)"
                        >
                            <i class="fas fa-times"></i>
                        </button>
                    </div>
                </div>
            </div>

            <!-- 弹窗底部 -->
            <div v-if="cartItems.length > 0" class="p-4 border-t">
                <div class="flex justify-between items-center mb-4">
                    <span>合计:</span>
                    <span class="text-danger text-xl font-bold">¥{{ totalPrice.toFixed(2) }}</span>
                </div>
                <div class="flex gap-3">
                    <button
                            class="flex-1 py-3 border rounded-lg hover:bg-gray-50 transition-colors"
                            @click="showCartPopup = false"
                    >
                        继续购物
                    </button>
                    <button
                            class="flex-1 py-3 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors"
                            @click="goToCheckoutFromPopup"
                    >
                        去结算
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 遮罩层 -->
    <div
            class="fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300"
            v-if="showCartPopup"
            @click="showCartPopup = false"
    ></div>

    <!-- 页脚 -->
    <footer class="bg-dark text-white mt-16">
        <div class="container mx-auto px-4 py-12">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <h3 class="text-lg font-bold mb-4">灰鲸商城</h3>
                    <p class="text-gray-400 text-sm">提供高品质的智能产品和优质的购物体验</p>
                    <div class="flex space-x-4 mt-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-wechat"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a>
                    </div>
                </div>
                <div>
                    <h4 class="font-medium mb-4">购物指南</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">购物流程</a></li>
                        <li><a href="#" class="hover:text-white">支付方式</a></li>
                        <li><a href="#" class="hover:text-white">配送方式</a></li>
                        <li><a href="#" class="hover:text-white">常见问题</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">售后服务</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li><a href="#" class="hover:text-white">退换货政策</a></li>
                        <li><a href="#" class="hover:text-white">保修政策</a></li>
                        <li><a href="#" class="hover:text-white">投诉建议</a></li>
                        <li><a href="#" class="hover:text-white">售后服务</a></li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-medium mb-4">联系我们</h4>
                    <ul class="space-y-2 text-gray-400 text-sm">
                        <li class="flex items-center"><i class="fas fa-phone-alt mr-2"></i> 400-123-4567</li>
                        <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> support@huijingmall.com</li>
                        <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2"></i> 北京市朝阳区科技园</li>
                    </ul>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2025 灰鲸商城 版权所有</p>
            </div>
        </div>
    </footer>
</div>

<script>
    // 全局配置
    const AppConfig = {
        api: {
            cartItems: '/api/cart/items',
            updateCart: '/api/cart/update',
            removeCartItem: '/api/cart/remove',
            addToCart: '/api/cart/add',
            moveToFavorites: '/api/cart/move-to-favorites',
            checkout: '/api/checkout'
        },
        defaults: {
            defaultAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
        }
    };

    // 创建Vue应用
    const { createApp, ref, reactive, onMounted, computed, watch } = Vue;
    const { ElMessage, ElMessageBox } = ElementPlus;

    const app = createApp({
        setup() {
            // 状态管理
            const showCartPopup = ref(false);
            const defaultAvatar = AppConfig.defaults.defaultAvatar;
            const user = reactive({
                id: 10001,
                nickname: '张三',
                avatar: 'https://picsum.photos/id/1005/200/200',
                isLoggedIn: true
            });

            // 购物车数据
            const cartItems = ref([
                {
                    id: 1,
                    productId: 1001,
                    name: '智能手表 Pro 3',
                    image: 'https://picsum.photos/id/1/200/200',
                    specs: '黑色 42mm',
                    price: 1299.00,
                    originalPrice: 1499.00,
                    quantity: 1,
                    stock: 50,
                    selected: true
                },
                {
                    id: 2,
                    productId: 1002,
                    name: '无线蓝牙耳机',
                    image: 'https://picsum.photos/id/2/200/200',
                    specs: '白色',
                    price: 799.00,
                    originalPrice: 999.00,
                    quantity: 1,
                    stock: 100,
                    selected: true
                },
                {
                    id: 3,
                    productId: 1003,
                    name: '便携式充电宝 20000mAh',
                    image: 'https://picsum.photos/id/4/200/200',
                    specs: '黑色 22.5W快充',
                    price: 199.00,
                    originalPrice: 249.00,
                    quantity: 2,
                    stock: 30,
                    selected: false
                }
            ]);

            // 推荐商品
            const recommendedProducts = ref([
                {
                    id: 2001,
                    name: '超薄笔记本电脑 14英寸',
                    image: 'https://picsum.photos/id/11/300/300',
                    price: 5999.00,
                    originalPrice: 6999.00
                },
                {
                    id: 2002,
                    name: '智能扫地机器人',
                    image: 'https://picsum.photos/id/12/300/300',
                    price: 1899.00,
                    originalPrice: 2299.00
                },
                {
                    id: 2003,
                    name: '高清投影仪 家用',
                    image: 'https://picsum.photos/id/13/300/300',
                    price: 2499.00,
                    originalPrice: 2799.00
                },
                {
                    id: 2004,
                    name: '空气净化器 除甲醛',
                    image: 'https://picsum.photos/id/14/300/300',
                    price: 1299.00,
                    originalPrice: 1599.00
                },
                {
                    id: 2005,
                    name: '无线充电器 15W',
                    image: 'https://picsum.photos/id/15/300/300',
                    price: 89.00,
                    originalPrice: 129.00
                },
                {
                    id: 2006,
                    name: '智能恒温杯',
                    image: 'https://picsum.photos/id/16/300/300',
                    price: 129.00,
                    originalPrice: 159.00
                }
            ]);

            // 全选状态
            const selectAll = computed({
                get() {
                    return cartItems.value.length > 0 && cartItems.value.every(item => item.selected);
                },
                set(value) {
                    cartItems.value.forEach(item => {
                        item.selected = value;
                    });
                }
            });

            // 购物车商品总数
            const cartCount = computed(() => {
                return cartItems.value.reduce((total, item) => total + item.quantity, 0);
            });

            // 已选商品数量
            const selectedCount = computed(() => {
                return cartItems.value
                    .filter(item => item.selected)
                    .reduce((total, item) => total + item.quantity, 0);
            });

            // 已选商品总价
            const totalPrice = computed(() => {
                return cartItems.value
                    .filter(item => item.selected)
                    .reduce((total, item) => total + (item.price * item.quantity), 0);
            });

            // 初始化数据
            onMounted(() => {
                // 实际项目中这里会从API加载购物车数据
                console.log('购物车页面初始化');
            });

            // 监听购物车变化，更新数量
            watch(cartItems, () => {
                // 实际项目中这里会同步更新到服务器
                console.log('购物车内容已更新');
            }, { deep: true });

            // 处理全选
            const handleSelectAll = () => {
                // 由computed的setter处理
            };

            // 处理单个商品选择
            const handleItemSelect = () => {
                // 由computed的getter处理全选状态
            };

            // 减少数量
            const decreaseQuantity = (index) => {
                if (cartItems.value[index].quantity > 1) {
                    cartItems.value[index].quantity--;
                    ElMessage.success('已更新数量');
                }
            };

            // 增加数量
            const increaseQuantity = (index) => {
                if (cartItems.value[index].quantity < cartItems.value[index].stock) {
                    cartItems.value[index].quantity++;
                    ElMessage.success('已更新数量');
                } else {
                    ElMessage.warning('已达最大库存');
                }
            };

            // 处理数量输入变化
            const handleQuantityChange = (index) => {
                let quantity = parseInt(cartItems.value[index].quantity);

                // 验证数量有效性
                if (isNaN(quantity) || quantity < 1) {
                    quantity = 1;
                } else if (quantity > cartItems.value[index].stock) {
                    quantity = cartItems.value[index].stock;
                    ElMessage.warning('已调整为最大库存数量');
                }

                cartItems.value[index].quantity = quantity;
            };

            // 移除商品
            const removeItem = (index) => {
                const item = cartItems.value[index];
                ElMessageBox.confirm(
                    `确定要从购物车中移除 ${item.name} 吗？`,
                    '确认移除',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }
                ).then(() => {
                    cartItems.value.splice(index, 1);
                    ElMessage.success('商品已从购物车中移除');
                }).catch(() => {
                    // 取消操作
                });
            };

            // 移到收藏夹
            const moveToFavorites = (index) => {
                const item = cartItems.value[index];
                ElMessageBox.confirm(
                    `确定要将 ${item.name} 移到收藏夹吗？`,
                    '确认移动',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }
                ).then(() => {
                    cartItems.value.splice(index, 1);
                    ElMessage.success('商品已移到收藏夹');
                }).catch(() => {
                    // 取消操作
                });
            };

            // 快速加入购物车
            const addQuickToCart = (product) => {
                // 检查商品是否已在购物车中
                const existingIndex = cartItems.value.findIndex(item => item.productId === product.id);

                if (existingIndex !== -1) {
                    // 如果已存在，增加数量
                    if (cartItems.value[existingIndex].quantity < 10) { // 假设最大购买量为10
                        cartItems.value[existingIndex].quantity++;
                        ElMessage.success('已增加商品数量');
                    } else {
                        ElMessage.warning('已达最大购买数量');
                    }
                } else {
                    // 如果不存在，添加新商品
                    cartItems.value.push({
                        id: Date.now(), // 临时ID
                        productId: product.id,
                        name: product.name,
                        image: product.image,
                        specs: '默认规格',
                        price: product.price,
                        originalPrice: product.originalPrice,
                        quantity: 1,
                        stock: 100,
                        selected: true
                    });
                    ElMessage.success('已添加到购物车');
                }
            };

            // 去结算
            const goToCheckout = () => {
                if (selectedCount.value === 0) {
                    ElMessage.warning('请选择要结算的商品');
                    return;
                }

                // 实际项目中跳转到结算页面
                ElMessage.success('跳转到结算页面');
                // window.location.href = '/checkout.html';
            };

            // 从弹窗去结算
            const goToCheckoutFromPopup = () => {
                showCartPopup.value = false;
                goToCheckout();
            };

            // 跳转到商品详情
            const goToProductDetail = (productId) => {
                window.location.href = `/product-detail.html?id=${productId}`;
            };

            // 退出登录
            const logout = () => {
                ElMessageBox.confirm(
                    '确定要退出登录吗？',
                    '提示',
                    {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'info'
                    }
                ).then(() => {
                    // 重置用户信息
                    user.id = null;
                    user.nickname = '';
                    user.avatar = '';
                    user.isLoggedIn = false;
                    ElMessage.success('已退出登录');
                }).catch(() => {
                    // 取消操作
                });
            };

            return {
                showCartPopup,
                user,
                defaultAvatar,
                cartItems,
                recommendedProducts,
                selectAll,
                cartCount,
                selectedCount,
                totalPrice,

                handleSelectAll,
                handleItemSelect,
                decreaseQuantity,
                increaseQuantity,
                handleQuantityChange,
                removeItem,
                moveToFavorites,
                addQuickToCart,
                goToCheckout,
                goToCheckoutFromPopup,
                goToProductDetail,
                logout
            };
        }
    });

    // 全局注册Element Plus
    app.use(ElementPlus);

    // 挂载应用
    app.mount('#app');
</script>
</body>
</html>
